<template>
  <div class="mod-prod prod-list-mod">
    <div style="margin-bottom: 10px">
      <el-button
        type="text"
        icon="ArrowLeftBold"
        @click="onBack"
      >
        返回
      </el-button>
    </div>

    <el-descriptions :column="4">
      <el-descriptions-item label="询价单号">
        {{ basicInfo.orderNo || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="询价时间">
        {{ basicInfo.inquiryTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        {{ basicInfo.updatedTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag size="small">
          {{ statusList[basicInfo.status] }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="询价客户">
        {{ basicInfo.merchantName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="询价人">
        {{ basicInfo.createdBy || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="报价总金额">
        {{ moneyFormat(basicInfo.totalPrice) }}
      </el-descriptions-item>
      <el-descriptions-item label="最长交期">
        {{ basicInfo.tradeTerm === 0 ? '现货' : basicInfo.tradeTerm ? `${basicInfo.tradeTerm}日发货` : '--' }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 主体内容 -->
    <div class="main-container">
      <!-- 表格 -->
      <div class="table-con prod-table">
        <el-table
          ref="prodListTableRef"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="subOrderNo"
            label="子询价单号"
            show-overflow-tooltip
            min-width="150"
          />

          <el-table-column
            prop="merchantShotName"
            label="品牌信息"
            min-width="150"
          />

          <el-table-column
            prop="merchantName"
            label="企业信息"
            min-width="150"
          />

          <el-table-column
            prop="shopUserMobile"
            label="商城管理员"
            min-width="150"
          />

          <el-table-column
            prop="status"
            label="状态"
            :width="100"
          >
            <template #default="scope">
              {{ statusList[scope.row.status] || '--' }}
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            :label="$t('publics.operating')"
            width="100"
          >
            <template #default="scope">
              <div class="text-btn-con">
                <div
                  class="default-btn text-btn"
                  @click="onView(scope.row)"
                >
                  详情
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        v-if="dataList.length"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
    </div>

    <el-dialog
      v-model="visible"
      :width="1000"
      :close-on-click-modal="false"
      title="子询价单详情"
    >
      <el-table
        :data="detailList"
        style="width: 100%"
      >
        <el-table-column
          prop="prodName"
          label="商品名称"
          show-overflow-tooltip
          min-width="150"
        >
          <template #default="scope">
            <el-tooltip
              v-if="getTip(scope.row)"
              effect="dark"
              :content="getTip(scope.row)"
              placement="bottom-start"
            >
              <el-icon style="color: red">
                <Warning />
              </el-icon>
            </el-tooltip>
            {{ scope.row.prodName }}
          </template>
        </el-table-column>

        <el-table-column
          prop="skuCode"
          label="型号"
          min-width="150"
        >
          <template #default="scope">
            {{ scope.row.skuCode }}
          </template>
        </el-table-column>

        <el-table-column
          prop="tradeTerm"
          label="交期"
          :width="100"
        >
          <template #default="scope">
            {{ scope.row.tradeTerm === 0 ? '现货' : scope.row.tradeTerm ? `${scope.row.tradeTerm}日发货` : (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
          </template>
        </el-table-column>

        <el-table-column
          prop="stocks"
          label="库存"
          min-width="100"
        >
          <template #default="scope">
            {{ scope.row.stocks || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
          </template>
        </el-table-column>

        <el-table-column
          prop="number"
          label="数量"
          :width="100"
        >
          <template #default="scope">
            {{ scope.row.number || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          label="单价(￥/个)"
          :width="140"
        >
          <template #default="scope">
            {{ scope.row.price || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
          </template>
        </el-table-column>

        <el-table-column
          prop="totalPrice"
          label="总价(￥)"
          :width="100"
        >
          <template #default="scope">
            {{ scope.row.totalPrice || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
          </template>
        </el-table-column>

        <el-table-column
          prop="buyerRemark"
          label="客户备注"
          show-overflow-tooltip
          :width="150"
        >
          <template #default="scope">
            {{ scope.row.buyerRemark || '--' }}
          </template>
        </el-table-column>

        <el-table-column
          prop="sellerRemark"
          label="商家备注"
          show-overflow-tooltip
          :width="150"
        >
          <template #default="scope">
            {{ scope.row.sellerRemark || '--' }}
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          align="center"
          :label="$t('publics.operating')"
          width="100"
        >
          <template #default="scope">
            <div class="text-btn-con">
              <div
                class="default-btn text-btn"
                @click="onViewProd(scope.row)"
              >
                查看
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-if="detailList.length"
        style="margin-top: 10px"
        :current-page="detailPage.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="detailPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="detailPage.total"
        @size-change="onPageSizeChangeD"
        @current-change="onPageChangeD"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { isAuth } from '@/utils'
import { statusList } from './eum.js'

const getTip = ({ invalidFlag, status, validStatus }) => {
  if (status == 7) {
    return '报价已过期'
  }
  if (status == 8) {
    return '该询价单已被取消'
  }
  if (validStatus != 0) {
    return '该商品已失效'
  }
  if (invalidFlag == 1) {
    return '该询价单已被商家设为无效商品'
  }
  return ''
}

const visible = ref(false)
const visiblePrice = ref(false)

let tempSearchForm = null // 保存上次点击查询的请求条件

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const detailPage = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const dataPriceForm = ref({})

let orderId = null
let orderNo
const route = useRoute()
onMounted(() => {
  init()
})

const init = () => {
  orderId = route.query.id || null
  orderNo = route.query.orderNo
  getBasicInfo()
}

const router = useRouter()
const onBack = () => {
  const { page, search, status } = route.query
  router.replace({
    path: '/order/inquiry/index',
    query: { page, search, status }
  })
}

const basicInfo = ref({})
const getBasicInfo = () => {
  http({
    url: http.adornUrl(`/shop/inquiryList/info/${orderNo}`),
    method: 'get',
    params: http.adornParams({})
  }).then(res => {
    basicInfo.value = res.data || {}
    getDataList(page)
  })
}

const getDataList = (pageParam) => {
  if (page) {
    const size = Math.ceil(page.total / page.pageSize)
    page.currentPage = (page.currentPage > size ? size : page.currentPage) || 1
  }
  tempSearchForm = {
    orderNo: basicInfo.value.orderNo,
    current: pageParam == null ? page.currentPage : pageParam.currentPage,
    size: pageParam == null ? page.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/shop/subInquiryList/page'),
    method: 'get',
    params: http.adornParams(tempSearchForm)
  }).then(({ data }) => {
    dataList.value = data.records || []
    page.total = data.total
    // 末尾页数据为空重新请求
    if (!dataList.value.length && page.currentPage > 1) {
      page.currentPage = 1
      getDataList()
    }
  })
}

const detailList = ref([])
const onView = (row) => {
  visible.value = true
  getDetailList(detailPage, row.subOrderNo)
}

const getDetailList = (pageParam, subOrderNo) => {
  const params = {
    subOrderNo,
    current: pageParam == null ? detailPage.currentPage : pageParam.currentPage,
    size: pageParam == null ? detailPage.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/shop/inquiryListItem/page'),
    method: 'get',
    params: http.adornParams(params)
  }).then(({ data }) => {
    detailList.value = (data.records || []).map(d => {
      d.totalPrice = (d.price || 0) * d.number
      return d
    })
    detailPage.total = data.total
    // 末尾页数据为空重新请求
    if (!detailList.value.length && detailPage.currentPage > 1) {
      detailPage.currentPage = 1
      getDetailList()
    }
  })
}

const onViewProd = (row) => {
  const url = import.meta.env.VITE_APP_SHOP_ADDRESS
  window.open(`${url}detail?prodId=${row.prodId}`)
}

const onPageSizeChange = (val) => {
  page.pageSize = val
  getDataList()
}
const onPageChange = (val) => {
  page.currentPage = val
  getDataList()
}
const onPageSizeChangeD = (val) => {
  detailPage.pageSize = val
  getDetailList()
}
const onPageChangeD = (val) => {
  detailPage.currentPage = val
  getDetailList()
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.prod-list-mod {
  .main-container {
    .table-con .table-cell-con .table-cell-text{
      word-break: break-all
    }
    .operation-bar {
      position: relative;
      .all-check-btn {
        margin-right: 10px;
      }
      .had-selected {
        font-size: 12px;
        margin-right: 10px;
      }
      .batch-setting-dropdown {
         .batch-setting-btn {
           padding-right: 15px;
           margin-right: 0;
          &:hover {
            .arrow::after {
              border-top: 1px solid #155bd4;
              border-right: 1px solid #155bd4;
            }
          }
          &.active {
            color: #155bd4;
            border-color: #155bd4;
            .arrow::after {
              border-top: 1px solid #155bd4;
              border-right: 1px solid #155bd4;
              transform: rotate(-45deg);
              top: 0;
              right: 0;
              transition: all .2s linear;
            }
          }
          .arrow {
            position: relative;
            margin-left: 9px;
            &::after{
              position: relative;
              top: -3px;
              right: 0;
              transition: all .2s linear;
              content: '';
              display: inline-block;
              width: 6px;
              height: 6px;
              border-top: 1px solid #656565;
              border-right: 1px solid #656565;
              transform: rotate(135deg);
            }
          }
        }
      }
    }

    .tag-text {
      display: inline-block;
      font-size: 12px;
      padding: 3px 5px;
      border-radius: 3px;
      color: #fff;
      cursor: pointer
    }
  }
  :deep(.export-load) {
    top: -50% !important;
  }
}
</style>
